<template>
  <div id="lunbo_manage">
    <div class="lunbo_item" v-for="(item,index) of lunboList" :key="item.id">
      <h3>标题</h3>
      <el-input placeholder="请输入内容" class="lunbo_title" v-model="item.title"></el-input>
      <el-upload
          class="avatar-uploader"
          :action="`${baseurl}/image_upload`"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :drag="true"
          :headers="{index}">
        <img v-if="item.cover" :src="item.cover" class="avatar"/>
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
      <el-button type="success" class="lunbo_btn" @click="updateLunbo(item.id,index)">更新轮播</el-button>
      <el-button class="lunbo_btn" type="danger" @click="deleteLunbo(item.id)">删除</el-button>
    </div>


    <h2 class="lunbo_add_lunbo">添加轮播</h2>
    <div class="lunbo_item">
      <h3>标题</h3>
      <el-input placeholder="请输入内容" v-model="imageTitle" class="lunbo_title"></el-input>
      <el-upload
          class="avatar-uploader"
          :action="`${baseurl}/image_upload`"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :drag="true" >
        <img v-if="imageUrl" :src="imageUrl" class="avatar"/>
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
      <el-button class="lunbo_btn" type="primary" @click="addLunbo">添加图片</el-button>
    </div>

  </div>
</template>

<script>
import baseurl from "../../../../const/baseurl";
import {findAllLunbo,addLunbo,deleteLunboById,updateLunboById} from "../../../../network/lunbo";

export default {
  name: "LunBoManage",
  data() {
    return {
      baseurl,
      lunboList:[],
      imageTitle:"",
      imageUrl:"",
    };
  },
  methods: {
    //上传图片事件
    handleAvatarSuccess(res) {
      /**
       * 关于上传的事件遇到的坑，
       * 由于我们使用了elementUI，而且使用了 v-for来遍历轮播图
       * 所以导致我们在使用 handleAvatarSuccess(上传成功事件)时
       * 就无法获取对应的 index 导致 轮播图的图片无法获取，无法更新
       * 那么这个时候，我们就可以使用 headers 把 index 上传到服务器中
       * 由服务器返回给前台，这个时候，就可以获取到对应的轮播图的index
       * 然后在 handleAvatarSuccess 获取到更新对应的 index轮播图 即可
       */
      // console.log(index,'标记');
      const {index} = res;
      // console.log(index);
      console.log(res);

      if (res.code === 200){
        console.log(res)
        console.log(this.lunboList)
        if (index){
          this.lunboList[index].imgUrl=res.data;
        }else{
          this.imageUrl=res.data;
        }
      }
    },
    addLunbo(){//添加轮播图的方法
      addLunbo(this.imageTitle,this.imageUrl).then((result)=>{
        console.log(result)
        if (result.data.code===200){
          this.$message({
            message: '添加成功!',
            type: 'success'
          });
          sessionStorage.setItem("sixthUrl",'/admin/page/lunbomanage');
          this.$router.push("/blankPage");
        }
      }).catch((reason)=>{
        console.log(reason);
      })
    },
    deleteLunbo(id){
      deleteLunboById(id).then((result)=>{
        console.log(result)
        if (result.data.code===200){
          this.$message({
            message: '删除成功!',
            type: 'success'
          });
          sessionStorage.setItem("sixthUrl",'/admin/page/lunbomanage');
          this.$router.push("/blankPage");
        }
      }).catch((reason)=>{
        console.log(reason);
      })
    },
    updateLunbo(id,index){//更新轮播图方法
      const lunboObj=this.lunboList[index];
      console.log(lunboObj);
      updateLunboById(id,lunboObj.imgTitle,lunboObj.imgUrl).then((result)=>{
        console.log(result);
        if (result.data.data.data.n>=1){
          this.$message({
            message: '更新成功!',
            type: 'success'
          });
          sessionStorage.setItem("sixthUrl",'/admin/page/lunbomanage');
          this.$router.push("/blankPage");
        }
      }).catch((reason)=>{
        console.log(reason);
      })
    },
  },
  created() {
    findAllLunbo().then((result)=>{
      console.log(result);
      this.lunboList=result.data.data;
    }).catch((reason)=>{
      console.log(reason);
    })
  }
}
</script>

<style scoped>
.lunbo_item{
  display: flex;
  border-bottom: 2px solid #cccccc;
  padding: 15px 10px;
  justify-content: space-evenly;
}
.lunbo_item h3{
  text-align: center;
  line-height: 178px;
}
.lunbo_title{/*文本输入框，即轮播图标题*/
  line-height: 178px;
  width: 300px;
}
.lunbo_btn{/*删除按钮*/
  position: relative;
  height: 50px;
  margin-top: 55px;
}
.lunbo_add_lunbo{/*添加轮播字样的样式*/
  line-height: 50px;
  margin-top: 10px;
}
.avatar-uploader .el-upload {
  position: relative;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  overflow: hidden;
  width: 100%;
  height: 100%;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader img{
  width: 100%;
  height: 100%;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
